import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  FlatList
} from 'react-native'

const { width, height } = Dimensions.get('window')
import LabelBarWithSwitch from '../../components/styleCompoent/LabelBarWithSwitch'
import NavigationBar from '../../components/common/NavigationBar'
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan'

class DoorMagnet extends Component {
  constructor(props) {
    super(props)

    // 初始状态
    this.state = {
      switchValue: false,
      recordList: [{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 0,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 0,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },{
        type: 1,
        time: '2018-08-11 11:54',
        info: '布防状态被触发',
      },]
    }

  }
  render() {
    const { switchValue, recordList } = this.state
    return(
      <View style = {styles.container}>
        <NavigationBar
          title={'门磁'}
          statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
          style={{backgroundColor: '#F4F4F4'}}
          navigator={this.props.navigator}
        />
        <View style={styles.flex}>
          <LabelBarWithSwitch
            barWidth={width-30}
            barHeight={68}
            containerStyle={{marginTop: 15}}
            title="感应器"
            changeValue={(value)=>{
              this.setState({switchValue: value})
            }}
            value={switchValue}
          />
          <View style={[styles.flex, styles.content]}>
            <Text style={styles.title}>历史记录</Text>
            <View style={styles.flex}>
              <FlatList
                data={recordList}
                keyExtractor={(item, index) => index}
                renderItem={this.renderRecordItem}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
              />
            </View>
          </View>
        </View>
      </View>
    )
  }

  renderRecordItem({ item }) {
    console.warn(JSON.stringify(item))
      return (
        <View style={styles.item}>
          <View style={styles.itemLeftView}>
            <View style={[styles.point, item.type === 0 && styles.red]}></View>
            <Text style={styles.timeText}>{item.time}</Text>
          </View>
          <Text style={styles.infoText}>{item.info}</Text>
        </View>
      )
  }

}

export default DoorMagnet

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
  flex: {
    flex: 1
  },
  title: {
    color: '#333333',
    fontSize: 14,
    marginTop: 20,
    marginLeft: 20,
    fontWeight: 'bold',
  },
  content: {
    marginTop: 20,
    marginBottom: 20,
    backgroundColor: '#ffffff',
    borderRadius: 6,
    marginLeft: 15,
    marginRight: 15,
  },
  item: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: 20,
    paddingRight: 20,
  },
  itemLeftView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  point: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: '#30C963'
  },
  red: {
    backgroundColor: '#E44124'
  },
  timeText: {
    color: '#999999',
    fontSize: 14,
    marginLeft: 10,
  },
  infoText: {
    color: '#666666',
    fontSize: 14,
  }
})
